﻿@page
@model AdminUI.Pages.SysManage.MenuModel
@{
    var F = Html.F();
}
@section head {

    <style>
        .f-grid-row.color3,
        .f-grid-row.color3 .f-icon,
        .f-grid-row.color3 a {
            color: #5c7a29;
        }
    </style>

}
@section body {

    <f:RegionPanel ID="RegionPanel1" IsFluid="true" CssClass="blockpanel" ShowBorder="false" Margin="10" IsViewPort="true">
        <Regions>
            <f:Region ID="Region1" ShowBorder="false" ShowHeader="false" RegionPosition="Left" BodyPadding="0 5 0 0" Width="200" Layout="Fit">
                <Items>
                    <f:Form ID="Panel1" IsFluid="true" ShowBorder="true" ShowHeader="false" Layout="VBox" BodyPadding="5">
                        <Items>
                            @*<f:DropDownList ID="MenuType" SelectedValue="1" OnSelectedIndexChanged="@Url.Handler("MenuType_SelectedIndexChanged")" OnSelectedIndexChangedFields="RegionPanel1">
                                <f:ListItem Text="平台菜单" Value="1" />
                                <f:ListItem Text="业务菜单" Value="2" />
                                <f:ListItem Text="门店菜单" Value="2" />
                            </f:DropDownList>*@
                            <f:Tree ID="Tree1" IsFluid="true" MinHeight="500" ShowHeader="false" ShowBorder="false" Nodes="@(TreeNode[])ViewBag.TreeMenuNodes">
                                <Listeners>
                                    <f:Listener Event="nodeclick" Handler="onTree1NodeClick">
                                    </f:Listener>
                                </Listeners>
                            </f:Tree>
                        </Items>
                    </f:Form>
                </Items>
            </f:Region>
            <f:Region ID="Region2" ShowBorder="false" ShowHeader="false" RegionPosition="Center" Layout="VBox" BoxConfigAlign="Stretch">
                <Items>
                    <f:Grid ID="Grid1" BoxFlex="1" ShowBorder="true" ShowHeader="false" EnableTextSelection="true" EnableColumnLines="true" DataIDField="MenuID" DataTextField="MenuName"
                            EnableCheckBoxSelect="true" EnableMultiSelect="false" DataSource="@ViewBag.MenuNodeList">
                        <Toolbars>
                            <f:Toolbar ID="Toolbar1" ToolbarAlign="Right" ItemSpace="1">
                                <Items>
                                    <f:Button ID="btnAdd" IconAlign="Left" EnableDefaultState="false" IconFont="_Plus" Text="新增">
                                        <Menu>
                                            <f:MenuButton ID="btnAddBrother" Text="同级菜单" OnClientClick="onAddClick(false);"></f:MenuButton>
                                            <f:MenuButton ID="btnAddChild" Text="下级菜单" OnClientClick="onAddClick(true);"></f:MenuButton>
                                        </Menu>
                                    </f:Button>
                                    <f:ToolbarSeparator></f:ToolbarSeparator>
                                    <f:Button ID="btnEdit" IconAlign="Left" EnableDefaultState="false" IconFont="_Edit" Text="编辑" OnClientClick="onEditClick();"></f:Button>
                                    <f:ToolbarSeparator></f:ToolbarSeparator>
                                    <f:Button ID="btnDelete" IconAlign="Left" EnableDefaultState="false" IconFont="TrashO" Text="删除" OnClientClick="onDeleteClick();"></f:Button>
                                    <f:ToolbarSeparator></f:ToolbarSeparator>
                                    <f:Button ID="btnChangeEnableUsers" IconAlign="Left" EnableDefaultState="false" IconFont="Tag" Text="状态">
                                        <Menu>
                                            <f:MenuButton ID="btnEnableUsers" Text="启用" OnClientClick="onEnableClick();"></f:MenuButton>
                                            <f:MenuButton ID="btnDisableUsers" Text="禁用" OnClientClick="onDisableClick();"></f:MenuButton>
                                        </Menu>
                                    </f:Button>
                                    <f:ToolbarSeparator></f:ToolbarSeparator>
                                    <f:Button ID="btnRefresh" IconAlign="Left" EnableDefaultState="false" IconFont="_Refresh" Text="刷新" OnClientClick="onRefreshClick();"></f:Button>
                                    <f:ToolbarFill ID="ToolbarFill1"></f:ToolbarFill>
                                    <f:DropDownList ID="ddlCondition" SelectedValue="" Width="150">
                                        <f:ListItem Text="== 请选择条件 ==" Value="" />
                                        <f:ListItem Text="菜单ID" Value="MenuID" />
                                        <f:ListItem Text="菜单名称" Value="MenuName" />
                                    </f:DropDownList>
                                    <f:TriggerBox ID="ttbSearch" ShowLabel="false" EmptyText="请输入搜索关键字" TriggerIcon="Search" OnTriggerClick="@Url.Handler("Grid_DoAction")" OnTriggerClickFields="Region2"
                                                  OnTriggerClickParameter1="@(new Parameter("actionType", "search", ParameterMode.String))"
                                                  OnTriggerClickParameter2="@(new Parameter("searchText", "F.ui.ttbSearch.getValue()"))"
                                                  OnTriggerClickParameter3="@(new Parameter("searchCondition", "F.ui.ddlCondition.getValue()"))">
                                    </f:TriggerBox>
                                </Items>
                            </f:Toolbar>
                        </Toolbars>
                        <Columns>
                            <f:RowNumberField HeaderText="#" TextAlign="Center" />
                            <f:RenderField HeaderText="菜单ID" DataField="MenuID" FieldType="Int" Width="80" TextAlign="Center" />
                            <f:RenderField HeaderText="菜单名称" DataField="MenuName" Width="120" />
                            <f:RenderField HeaderText="类型" DataField="MenuType" FieldType="Int" RendererFunction="renderMenuType" Width="100" TextAlign="Center" />
                            <f:RenderField HeaderText="上级ID" DataField="ParentID" Width="80" TextAlign="Center" />
                            <f:RenderField HeaderText="层级" DataField="MenuLevel" Width="50" TextAlign="Center" />
                            <f:RenderField HeaderText="图标" DataField="Icon" Width="50" TextAlign="Center" RendererFunction="renderIconClass" />
                            <f:RenderField HeaderText="排序" DataField="SortFlag" Width="50" TextAlign="Center" />
                            <f:RenderCheckField HeaderText="启用" DataField="IsEnable" RenderAsStaticField="true" Width="60" TextAlign="Center" />
                            <f:RenderField HeaderText="链接地址" DataField="Url" Width="260" />
                            <f:RenderField HeaderText="备注" DataField="Memo" Width="200" ExpandUnusedSpace="true" />
                        </Columns>
                    </f:Grid>
                </Items>
            </f:Region>
        </Regions>
    </f:RegionPanel>

    <f:Window ID="Window1" IsModal="true" Hidden="true" Target="Top" EnableResize="true" EnableMaximize="true" EnableIFrame="true" Width="750" Height="500">
        <Listeners>
            <f:Listener Event="close" Handler="onWindowClose('refreshParent');"></f:Listener>
        </Listeners>
    </f:Window>

}


@section script {

    <script src="~/res/js/grid.js"></script>
    <script>
        function onWindowClose(actionType, actionParams) {
            var params = {
                nodeId: getNodeId()
            };

            // 加入扩展参数
            if(actionType) {
                params.actionType = actionType;
                params.menuType = @Model.MenuType;
            }
            if(actionParams) {
                $.extend(params, actionParams);
            }

            // 触发后台事件
            F.doPostBack('@Url.Handler("Grid_DoAction")', 'RegionPanel1', params);
        }

        function onAddClick(isChild) {
            var nodeId = 0;
            var nodeText = "顶层菜单";

            var nodeData = F.ui.Tree1.getSelectedNode(true);
            if (nodeData) {
                nodeId = nodeData.id;
                nodeText = nodeData.text;
            }

            if (!isChild && nodeId > 0) {
                var parent = F.ui.Tree1.getParentData(nodeId);
                if (parent && nodeData.level > 1) {
                    nodeId = parent.id;
                    nodeText = parent.text;
                } else {
                    nodeId = 0;
                    nodeText = "顶层菜单";
                }
            }

            var path = "/SysManage/MenuAdd?nodeId=" + nodeId + "&nodeText=" + nodeText + "&menuType=" + @Model.MenuType;
            //showNotify(path);
            F.ui.Window1.show(path, '新增菜单');
        }

        function getNodeId() {
            var nodeId = 0;
            var nodeData = F.ui.Tree1.getSelectedNode(true);
            if (nodeData) {
                nodeId = nodeData.id;
            }
            return nodeId;
        }

        function onEditClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要修改的记录！');
                return;
            }

            var selectedRow = grid1.getSelectedRow();
            var path = "/SysManage/MenuEdit?id=" + selectedRow;
            //showNotify(path);
            F.ui.Window1.show(path, '修改菜单');
        }

        function onDeleteClick() {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要删除的记录！');
                return;
            }

            var selectedRows = grid1.getSelectedRows();
            F.confirm({
                message: '确定要删除所选记录吗？',
                target: '_top',
                ok: function () {
                    F.doPostBack('@Url.Handler("Grid_DoAction")', 'Region2', {
                        actionType: 'delete',
                        menuType:@Model.MenuType,
                        nodeId: getNodeId(),
                        selectedIDs: selectedRows
                    });
                }
            });
        }

        function onEnableClick() {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要启用的记录！');
                return;
            }

            var selectedRows = grid1.getSelectedRows();
            F.confirm({
                message: '确定要启用所选记录吗？',
                target: '_top',
                ok: function () {
                    F.doPostBack('@Url.Handler("Grid_DoAction")', 'Region2', {
                        actionType: 'enable',
                        menuType:@Model.MenuType,
                        nodeId: getNodeId(),
                        selectedIDs: selectedRows
                    });
                }
            });
        }

        function onDisableClick() {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要禁用的记录！');
                return;
            }

            var selectedRows = grid1.getSelectedRows();
            F.confirm({
                message: '确定要禁用所选记录吗？',
                target: '_top',
                ok: function () {
                    F.doPostBack('@Url.Handler("Grid_DoAction")', 'Region2', {
                        actionType:'disable',
                        nodeId: getNodeId(),
                        menuType:@Model.MenuType,
                        selectedIDs: selectedRows
                    });
                }
            });
        }

        function onRefreshClick() {
            var grid1 = F.ui.Grid1;
            var selectedRows = grid1.getSelectedRows();
            F.doPostBack('@Url.Handler("Grid_DoAction")', 'Region2', {
                actionType: 'refresh',
                menuType:@Model.MenuType,
                nodeId: getNodeId(),
                selectedIDs: selectedRows
            });
        }

        //菜单类型：1-平台，2-租户，3-门店
        function renderMenuType(value, params) {
            switch (value) {
                case 1:
                    return "<span class='tag-c1'>平台菜单</span>";
                case 2:
                    return "<span class='tag-c3'>租户菜单</span>";
                case 3:
                    return "<span class='tag-c5'>门店菜单</span>";
                default:
                    return "-";
            }
        }

        // Css图标
        function renderIconClass(value, params) {
            return F.formatString('<i class="f-icon {0}" title="{0}"></i>', value);
        }

        function onTree1NodeClick(event, nodeId) {
            var tree = this;
            var nodeData = tree.getNodeData(nodeId);

            // 触发后台事件
            F.doPostBack('@Url.Handler("Tree1_NodeClick")', 'Grid1', {
                menuType:@Model.MenuType,
                nodeId: nodeId,
                nodeText: nodeData.text
            });
        }

    </script>
}